<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <ul>
    <li v-for="item in letters" :key="item">{{item}}</li>
  </ul>
  <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      letters: ['A', 'B', 'C', 'D', 'E']
    },
    methods: {
      btnClick() {
        // 1.push方法
        // this.letters.push('aaa')
        // this.letters.push('aaa', 'bbb', 'ccc')

        // 2.pop():删除数组中的最后一个元素
        // this.letters.pop();

        // 3.shift():删除数组中的第一个元素
        // this.letters.shift();

        // 4.unshift():在数组的最前面添加元素
        // this.letters.unshift('aaa', 'bbb', 'ccc')

        // 5.splice作用：删除元素/插入元素/替换元素
        // 删除元素：第二个参数传入你要删除几个元素（如果没有传，就删除后面所有的元素）
        // 替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素
        // 插入元素：第二个参数，传入0，并且后面要跟上插入的元素
        // this.letters.splice(1, 3, 'm', 'n', 'l', 'x')
        // this.letters.splice(1, 0, 'm', 'n', 'l', 'x')
        // this.letters.splice(1, 3)

        // 6.reverse():翻转数组
        // this.letters.reverse()

        // 7.sort():排序
        // this.letters.sort()
        // this.letters.sort(function (a, b) {
        //   console.log(b-a)
        //   return b-a
        // })

        // 2.通过索引值修改数组中的元素
        // this.letters[0] = 'bbbb'; // 修改页面数据失败，这样直接改不能加入响应式
        Vue.set(this.letters, 0, 'bbb')


        // ...表示参数数量任意
        function sum(...num) {
          console.log(num)
        }

        sum(1, 4, 5, 6, 7, 54, 54)
      }
    }
  })
</script>

</body>
</html>
